S04-02 JS基础-DOM

[TOC]

概述

API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

任何开发语言都有自己的API
API的特征输入和输出(I/O)
- var max = Math.max(1, 2, 3);
API的使用方法(console.log('adf'))

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

掌握常见浏览器提供的API的调用方式

MDN-Web API

JavaScript的组成

ECMAScript - JavaScript的核心

定义了JavaScript 的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(目前，HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM又称为文档树模型

文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性

DOM经常进行的操作

获取元素
对元素进行操作(设置其属性或调用其方法)
动态创建元素
事件(什么时机做相应的操作)

获取页面元素

为什么要获取页面元素

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

根据id获取元素

javascript

var div = document.getElementById('main');
console.log(div);

// 获取到的数据类型 HTMLDivElement，对象都是有类型的

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素

javascript

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

// getElement***获取到的集合是一个动态集合
// querySelector(All) 获取到的集合是一个静态集合

var oUl = document.getElementById('my-ul');
var aLi = oUl.getElementsByTagName('li');

// 这里必须要把aLi.length从for里面拿出来，
// 否则的话每次for循环都会运行一遍aLi.length
// 而由于appendChild在生成新的li，所以aLi的长度是变化的，就会形成一个死循环
var len = aLi.length;	
for(var i = 0; i < len; i++){
  oUl.appendChild( document.createElement('li') );
}
console.log(aLi.length);

根据name获取元素*

兼容：在IE和Opera中， getElementsByName() 方法还会返回那些 id 为指定值的元素

javascript

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根据类名获取元素*

兼容：IE9+才支持

javascript

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根据选择器获取元素*

兼容：IE8+支持

getElement*** 获取到的集合是一个动态集合 querySelector(All) 获取到的集合是一个静态集合

javascript

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

总结

掌握
	getElementById()
	getElementsByTagName()
了解
	getElementsByName()
	getElementsByClassName()
	querySelector()
	querySelectorAll()

事件

事件：触发-响应机制

事件三要素

事件源:触发(被)事件的元素
事件名称: click 点击事件
事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

javascript

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

案例

点击按钮弹出提示框
点击按钮切换图片

属性操作

非表单元素的属性

href、title、id、src、className

javascript

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

案例：

点击按钮显示隐藏div

美女相册

innerHTML和innerText*

javascript

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);

HTML转义符

"		&quot;
'		&apos;
&		&amp;
<		&lt;   // less than  小于
>		&gt;   // greater than  大于
空格	   &nbsp;
©		&copy;

innerHTML和innerText的区别

innerHTML 获取内容的时候，如果内容中有标签，会把标签也获取到，而且是原封不动的获取
innerText 获取内容的时候，如果内容中有标签，会把标签过滤掉，并且会把前后的换行和空白都去掉，只保留一个空格

innerText的兼容性处理

表单元素属性

value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性

案例

点击按钮禁用文本框
给文本框赋值，获取文本框的值
检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
设置下拉框中的选中项
搜索文本框
全选反选

自定义属性操作

getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作

使用style方式设置的样式显示在标签行内

javascript

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

注意
通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

类名操作

修改标签的className属性相当于直接修改标签的类名

javascript

var box = document.getElementById('box');
box.className = 'show';

案例

开关灯
点击按钮改变div的背景颜色
图片切换二维码案例
当前输入的文本框高亮显示
点击按钮改变div的大小和位置
列表隔行变色、高亮显示
tab选项卡切换

创建元素的三种方式

document.write()

javascript

document.write('新设置的内容<p>标签也可以生成</p>');

innerHTML

javascript

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

document.createElement()

javascript

var div = document.createElement('div');
document.body.appendChild(div);

性能问题

innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
可以借助字符串或数组的方式进行替换，再设置给innerHTML
优化后与document.createElement性能相近

案例

动态创建列表，高亮显示
根据数据动态创建表格

节点操作

javascript

var body = document.body;
var div = document.createElement('div');
body.appendChild(div);

var firstEle = body.children[0];
body.insertBefore(div, firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);

案例：

选择水果

节点属性

nodeType 节点的类型
- 1 元素节点
- 2 属性节点
- 3 文本节点
nodeName 节点的名称(标签名称)
nodeValue 节点值
- 元素节点的nodeValue始终是null

模拟文档树结构

javascript

function Node(option) {
  this.id = option.id || '';
  this.nodeName = option.nodeName || '';
  this.nodeValue = option.nodeValue || '';
  this.nodeType = 1;
  this.children = option.children || [];
}

var doc = new Node({
  nodeName: 'html'
});
var head = new Node({
  nodeName: 'head'
});
var body = new Node({
  nodeName: 'body'
})
doc.children.push(head);
doc.children.push(body);

var div = new Node({
  nodeName: 'div',
  nodeValue: 'haha',
});

var p = new Node({
  nodeName: 'p',
  nodeValue: '段落'
})
body.children.push(div);
body.children.push(p);

function getChildren(ele) {
  for(var i = 0; i < ele.children.length; i++) {
    var child = ele.children[i];
    console.log(child.nodeName);
    getChildren(child);
  }
}
getChildren(doc);

节点层级

javascript

var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

注意
childNodes和children的区别，childNodes获取的是子节点，children获取的是子元素
nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持
总结

节点操作，方法
	appendChild()
	insertBefore()
	removeChild()
	replaceChild()
节点层次，属性
	parentNode
	childNodes
	children
	nextSibling/previousSibling
	firstChild/lastChild

事件详解

注册/移除事件的三种方式

javascript

var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('点击后执行');
}

兼容代码

javascript

function addEventListener(element, type, fn) {
  if (element.addEventListener) {
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent){
    element.attachEvent('on' + type,fn);
  } else {
    element['on' + type] = fn;
  }
}

function removeEventListener(element, type, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn);
  } else {
    element['on'+type] = null;
  }
}

事件的三个阶段

捕获阶段
当前目标阶段
冒泡阶段
事件对象.eventPhase属性可以查看事件触发时所处的阶段

事件对象的属性和方法

event.type 获取事件类型
clientX/clientY 所有浏览器都支持，窗口位置
pageX/pageY IE8以前不支持，页面位置
event.target || event.srcElement 用于获取触发事件的元素
event.preventDefault() 取消默认行为

案例

跟着鼠标飞的天使
鼠标点哪图片飞到哪里
获取鼠标在div内的坐标

阻止事件传播的方式

标准方式 event.stopPropagation();
IE低版本 event.cancelBubble = true; 标准中已废弃

常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发

特效

偏移量

offsetParent用于获取距离当前元素最近的定位父级元素
offsetParent和parentNode的区别

javascript

var box = document.getElementById('box');

console.log(box.offsetParent);
// 获取距离当前元素最近的定位父级元素
console.log(box.offsetLeft);
console.log(box.offsetTop);
// 大小包括border和padding
console.log(box.offsetWidth);
console.log(box.offsetHeight);

客户区大小

javascript

var box = document.getElementById('box');
// client** 是border的宽度
console.log(box.clientLeft);
console.log(box.clientTop);
// 获取大小 包括padding 但是不包括border
console.log(box.clientWidth);
console.log(box.clientHeight);

滚动偏移

javascript

var box = document.getElementById('box');
// box 滚动出去的距离
console.log(box.scrollLeft)
console.log(box.scrollTop)

console.log(box.scrollWidth)
console.log(box.scrollHeight)

案例

拖拽案例
弹出登录窗口
放大镜案例
模拟滚动条
匀速动画函数
变速动画函数
无缝轮播图
回到顶部

S04-02 JS基础-DOM ​

概述 ​

API的概念 ​

Web API的概念 ​

掌握常见浏览器提供的API的调用方式 ​

JavaScript的组成 ​

ECMAScript - JavaScript的核心 ​

BOM - 浏览器对象模型 ​

DOM - 文档对象模型 ​

DOM ​

DOM的概念 ​

DOM经常进行的操作 ​

获取页面元素 ​

为什么要获取页面元素 ​

根据id获取元素 ​

根据标签名获取元素 ​

根据name获取元素* ​

根据类名获取元素* ​

根据选择器获取元素* ​

事件 ​

事件三要素 ​

事件的基本使用 ​

案例 ​

属性操作 ​

非表单元素的属性 ​

表单元素属性 ​

案例 ​

自定义属性操作 ​

样式操作 ​

类名操作 ​

案例 ​

创建元素的三种方式 ​

document.write() ​

innerHTML ​

document.createElement() ​

性能问题 ​

案例 ​

节点操作 ​

节点属性 ​

模拟文档树结构 ​

节点层级 ​

事件详解 ​

注册/移除事件的三种方式 ​

兼容代码 ​

事件的三个阶段 ​

事件对象的属性和方法 ​

案例 ​

阻止事件传播的方式 ​

常用的鼠标和键盘事件 ​

特效 ​

偏移量 ​

客户区大小 ​

滚动偏移 ​

案例 ​

附录 ​

元素的类型 ​

S04-02 JS基础-DOM

概述

API的概念

Web API的概念

掌握常见浏览器提供的API的调用方式

JavaScript的组成

ECMAScript - JavaScript的核心

BOM - 浏览器对象模型

DOM - 文档对象模型

DOM

DOM的概念

DOM经常进行的操作

获取页面元素

为什么要获取页面元素

根据id获取元素

根据标签名获取元素

根据name获取元素*

根据类名获取元素*

根据选择器获取元素*

事件

事件三要素

事件的基本使用

案例

属性操作

非表单元素的属性

表单元素属性

案例

自定义属性操作

样式操作

类名操作

案例

创建元素的三种方式

document.write()

innerHTML

document.createElement()

性能问题

案例

节点操作

节点属性

模拟文档树结构

节点层级

事件详解

注册/移除事件的三种方式

兼容代码

事件的三个阶段

事件对象的属性和方法

案例

阻止事件传播的方式

常用的鼠标和键盘事件

特效

偏移量

客户区大小

滚动偏移

案例

附录

元素的类型